<template>
  <el-dialog title="修改友链信息" :visible="visible" @close="handleClose">
    <el-form label-width="100px">
      <el-form-item label="排序" prop="sort">
              <el-input-number v-model="form.sort" :min="0" :controls="false"></el-input-number>
            </el-form-item>
      <el-form-item label="站点名称" prop="siteName">
        <el-input v-model="form.siteName"></el-input>
      </el-form-item>
      <el-form-item label="站点地址" prop="url">
        <el-input v-model="form.url" ></el-input>
      </el-form-item>
       <el-form-item label="是否显示" prop="showFlag" >
            <el-switch
              v-model="value"
              active-color="#409EFF"
              inactive-color="#C0CCDA">
            </el-switch>
          </el-form-item>
      <el-form-item label="外链添加位置" prop="category">
        <el-select  @change="change" v-model="value1" multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式" prop="contactWay">
        <el-input v-model="form.contactWay" ></el-input>
      </el-form-item>
       <el-form-item label="站点介绍" prop="introduce">
        <el-input v-model="form.introduce" type="textarea"></el-input>
      </el-form-item> 
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    props: ['visible', 'data', 'type'],
    data () {
      return {
        options: [{
          value: 1,
          label: 'PC端'
        }, {
          value: 2,
          label: '移动端'
        }],
        value1:'',
        value:null,
        form: {
          sort:'',
          siteName: '',
          url:'',
          category:'',
          contactWay:'',
          introduce:'',
          showFlag:''
        },
        formData:{
          sort:'',
          siteName: '',
          url:'',
          category:'',
          contactWay:'',
          introduce:'',
          showFlag:''
        }
      }
    },
    mounted(){
      this.form = this.data;
      this.formData = JSON.stringify(this.form)
      if(this.form.showFlag=="0"){
          this.value=false
      }else{
          this.value=true
      }
      if(this.form.category==1){
          this.value1=[1]
      }else if(this.form.category==2){
          this.value1=[2]
      }else{
          this.value1=[1,2]
      }
      console.log(this.value1)
    },
    methods: {
      handleClose() {
        let formData = JSON.parse(this.formData);
        this.form = formData;
        this.$emit('save', true)
        // this.$emit('editCancle', true)
      },
      onSubmit() {
        if(this.value==true){
            this.form.showFlag='1'
        }else{
            this.form.showFlag='0'
        }
        const params = {
          ...this.form,
        }
        this.$api.blogroll.update(params).then(res => {
          if(res.success) {
            this.$message.success('修改成功')
            this.$emit('save', true)
          }
        })
      },
      change(val){
        if(this.value1.length==1 && this.value1[0]==1){
            this.form.category='1'
        }else if(this.value1.length==1 && this.value1[0]==2){
            this.form.category='2'
        }else if(this.value1.length==0){
            this.form.category=''
        }else{
            this.form.category='3'
        }
        console.log(this.form.category)
      }
    }
  }
</script>
